<template>
  <div>
    <!-- @changeValAction="handleChangeVal" -->
    <div style="position:absolute;right:10%;top:10px;z-index:100">
      <chart-select v-if="isShowSelect" :options="options"/>
    </div>
    <div ref="pie" style="width:100%;height:500px;" v-loading="loading"></div>
  </div>
</template>

<script>
// import {getChartData} from '@api/chart'
export default {
  data() {
    return {
      loading: true,
      options: [
        {
          value: "选项1",
          label: "黄金糕"
        },
        {
          value: "选项2",
          label: "双皮奶"
        },
        {
          value: "选项3",
          label: "蚵仔煎"
        },
        {
          value: "选项4",
          label: "龙须面"
        },
        {
          value: "选项5",
          label: "北京烤鸭"
        }
      ]
    };
  },
  props: {
    api: {
      type: String,
      default: undefined
    },
    isShowSelect: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    api(nv) {
      // getChartData(nv).then(res => {
      //   if (res.msg > 0) {
      //     resData = res;
      //   } else {
      //     this.$message("请求失败");
      //   }
      // });
    }
  },
  mounted() {
    // 后台需要传：{title:String,data:Array[object],legendData:Array}
    this.loading = false;
    let resData = {};
    resData.title = "圆形饼图";
    resData.legendData = [
      "直接访问",
      "邮件营销",
      "联盟广告",
      "视频广告",
      "搜索引擎"
    ];
    resData.data = [
      {
        name: "访问来源",
        type: "pie",
        radius: "55%",
        center: ["50%", "60%"],
        data: [
          { value: 335, name: "直接访问" },
          { value: 310, name: "邮件营销" },
          { value: 234, name: "联盟广告" },
          { value: 135, name: "视频广告" },
          { value: 1548, name: "搜索引擎" }
        ]
        // itemStyle: {
        //   emphasis: {
        //     shadowBlur: 10,
        //     shadowOffsetX: 0,
        //     shadowColor: "rgba(0, 0, 0, 0.5)"
        //   }
        // }
      }
    ];
    let myChart = this.$echarts.init(this.$refs.pie);
    // 指定图表的配置项和数据
    let option = {
      title: {
        text: resData.title,
        // subtext: "纯属虚构",
        x: "2%",
        textStyle: {
          color: "rgba(96, 98, 102, 1)",
          fontSize: "20"
        }
      },
      // color: ["#3398DB"],
      tooltip: {
        trigger: "item",
        formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
        type: "scroll",
        orient: "vertical",
        top: "10%",
        left: "2%",
        bottom: "10%",
        data: resData.legendData
      },
      series: resData.data
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    // 浏览器窗口自适应
    window.onresize = function() {
      myChart.resize();
    };
  }
};
</script>

<style>
</style>
